<template>
  <div class="group_box">
    <div
      v-if="list.length > 1"
      class="link_line"
      :style="{
        width: linkLineWidth + 'px',
        left: linkLineLeft + 'px',
      }"
    ></div>
    <div v-if="list.length === 1 && level > 0" class="link_line_point"></div>
    <div
      v-for="(item, i) in list"
      :key="i"
      :id="`group_wrapper_${item.id}`"
      class="group_wrapper"
    >
      <div
        class="group_cell"
        :class="{
          top_line: !!item.parentId,
          bottom_line: item.children && item.children.length,
        }"
      >
        <el-dropdown
          :disabled="
            !$hasOneOfPermissions([
              $permission.GROUP_SAVE_OR_UPDATE,
              $permission.USERS_UPDATE_GROUP,
              $permission.GROUP_DELETE,
            ])
          "
          placement="bottom"
          @command="(command) => handleCommand(command, item)"
        >
          <el-card shadow="hover" style="border: 2px solid #409eff">
            <template v-if="item.members.length" #header>
              <div class="clearfix">
                <span class="name_text">{{ item.groupName }}</span>
              </div>
            </template>
            <div v-if="item.members.length" class="person_list">
              <div class="person_content">
                <div
                  v-for="(cell, j) in item.members"
                  :key="j"
                  class="person_item"
                >
                  <UserAvatar
                    :src="cell.avatar"
                    :showHuangguan="cell.isLeader"
                    :size="30"
                  />
                  <div class="info_name">
                    {{ cell.truename || cell.nickname }}
                  </div>
                </div>
              </div>
            </div>
            <span v-else class="name_text">{{ item.groupName }}</span>
          </el-card>
          <template #dropdown>
            <!-- size="small" -->
            <el-dropdown-menu>
              <el-dropdown-item
                v-if="$hasPermission($permission.GROUP_SAVE_OR_UPDATE)"
                command="editGroup"
              >
                修改组织
              </el-dropdown-item>
              <el-dropdown-item
                v-if="$hasPermission($permission.GROUP_SAVE_OR_UPDATE)"
                command="createChild"
              >
                添加下级
              </el-dropdown-item>
              <el-dropdown-item
                v-if="$hasPermission($permission.USERS_UPDATE_GROUP)"
                command="editMember"
                >编辑人员</el-dropdown-item
              >
              <el-dropdown-item
                v-if="$hasPermission($permission.GROUP_DELETE)"
                command="deleteGroup"
                class="warning"
              >
                删除组织
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <GroupBox
        v-if="item.children && item.children.length"
        :list="item.children"
        :level="item.level"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, nextTick, inject } from "vue";
import { useStore } from "vuex";
import UserAvatar from "../../../components/UserAvatar.vue";

export default {
  name: "GroupBox",
  components: { UserAvatar },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    level: {
      type: Number,
      default: 0,
    },
  },
  setup(props, context) {
    // ------------------ 通用属性 start --------------------
    const store = useStore();
    const editGroup = inject("editGroup");
    const createChild = inject("createChild");
    const editMember = inject("editMember");
    const deleteGroup = inject("deleteGroup");
    // ------------------ 通用属性 end ----------------------

    const childrenLeftList = ref([]);

    const linkLineWidth = ref(0);
    const linkLineLeft = ref(0);

    const itemRefs = [];
    const setItemRef = (el) => {
      if (el) {
        itemRefs.push(el);
      }
    };

    // 计算属性
    const userInfo = computed(() => store.state.user.userInfo);

    const handleCommand = (command, item) => {
      switch (command) {
        case "editGroup":
          editGroup(item);
          break;
        case "createChild":
          createChild(item);
          break;
        case "editMember":
          editMember(item);
          break;
        case "deleteGroup":
          deleteGroup(item);
          break;
      }
    };

    // 组件钩子
    onMounted(() => {
      nextTick(() => {
        let lineWidth = 0;
        props.list.forEach((item, index) => {
          // item 即为对应的组件ref
          // 可通过 item 获取对应组件上的属性或方法
          const el = document.getElementById(`group_wrapper_${item.id}`);
          if (index === 0 || index === props.list.length - 1) {
            lineWidth += el.offsetWidth / 2;
          } else {
            lineWidth += el.offsetWidth;
          }
          if (index === 0) {
            linkLineLeft.value = el.offsetWidth / 2 - 1;
          }
        });
        // 2 像素是为了衔接的更好
        linkLineWidth.value = lineWidth + 2;
      });
    });

    return {
      userInfo,
      childrenLeftList,
      setItemRef,
      linkLineWidth,
      linkLineLeft,
      handleCommand,
    };
  },
};
</script>

<style lang="less" scoped>
.group_box {
  text-align: center;
  position: relative;
  display: inline-flex;
  .group_wrapper {
    position: relative;
    padding: 0 20px;
    display: inline-flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
  }

  .group_cell {
    display: inline-flex;
    position: relative;
    z-index: 1;
    margin-top: 20px;
    margin-bottom: 20px;
    &.top_line::before {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px;
      background: #409eff;
      height: 20px;
      transform: translate(-50%, -100%);
    }
    &.bottom_line::after {
      display: block;
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 2px;
      background: #409eff;
      height: 20px;
      transform: translate(-50%, 100%);
    }
    .cell_box {
      display: inline-block;
      // white-space: nowrap;
      border: 1px solid #409eff;
      padding: 10px 20px;
      border-radius: 4px;
      width: 30px;
    }
  }

  .link_line {
    position: absolute;
    top: -1px;
    z-index: 0;
    height: 2px;
    width: 500px;
    box-sizing: border-box;
    background-color: #409eff;
  }

  .link_line_point {
    position: absolute;
    top: -1px;
    left: 50%;
    z-index: 0;
    height: 2px;
    width: 2px;
    transform: translateX(-50%);
    box-sizing: border-box;
    background-color: #409eff;
  }
}

.cell_box_drop {
  max-height: 400px;
  overflow: hidden auto;
  .cell_box_drop_item {
    display: flex;
    align-items: center;
    height: 40px;
  }
  .name_box {
    flex: 1;
    overflow: hidden;
    margin: 0 10px;
  }
}

.person_list {
  box-sizing: border-box;
  // padding: 10px 0;
  .person_content {
    width: 100%;
  }
  .person_item {
    display: flex;
    align-items: center;
    height: 40px;
  }
  .info_name {
    flex: 1;
    overflow: hidden;
    margin-left: 10px;
    color: #666;
    font-size: 14px;
    text-align: left;
  }
}

.warning.el-dropdown-menu__item:focus,
.warning.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: rgb(254, 240, 240);
  color: #f56c6c;
}

.name_text {
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 22px;
}
</style>
